<!-- 任务详情组件 -->
<template>
  <view class="task-detail-wrapper">
    <!-- 专用遮罩层，确保不会遮挡关键交互区域 -->
    <view class="detail-mask" v-if="show" @click="onClose"></view>
    
    <u-popup
      :show="show"
      mode="center"
      width="95%"
      height="auto"
      @close="onClose"
      :closeable="true"
      :mask-close-able="false"
      :close-on-click-overlay="false"
      :border-radius="10"
      :safe-area-inset-bottom="true"
      :overlay="false"
    >
      <view class="task-detail-container">
        <view class="task-header">
          <view class="task-status" :class="statusClass">
            <u-icon :name="taskStatus === 'done' ? 'checkbox-mark' : 'clock'" size="18" color="#fff"></u-icon>
            <text class="status-text">{{ statusText }}</text>
          </view>
          <view class="task-title-wrapper">
            <text class="task-title">{{ taskTitle }}</text>
          </view>
        </view>
        
        <view class="task-content">
          <!-- 描述 -->
          <view class="detail-section" v-if="taskDescription">
            <view class="section-header">
              <text class="section-title">描述</text>
            </view>
            <view class="section-content">
              <text class="task-description">{{ taskDescription }}</text>
            </view>
          </view>
          
          <!-- 截止日期 -->
          <view class="detail-section" v-if="taskDeadline">
            <view class="section-header">
              <text class="section-title">截止日期</text>
            </view>
            <view class="section-content">
              <view class="deadline-info">
                <u-icon name="calendar" size="18" color="#666"></u-icon>
                <text class="deadline-text">{{ formatDate(taskDeadline) }}</text>
                <view class="deadline-status" :class="deadlineStatusClass">
                  <text class="deadline-status-text">{{ deadlineStatusText }}</text>
                </view>
              </view>
            </view>
          </view>
          
          <!-- 优先级 -->
          <view class="detail-section">
            <view class="section-header">
              <text class="section-title">优先级</text>
            </view>
            <view class="section-content">
              <view class="priority-badge" :class="priorityClass">
                <text class="priority-text">{{ priorityText }}</text>
              </view>
            </view>
          </view>
          
          <!-- 标签 -->
          <view class="detail-section" v-if="taskTags && taskTags.length > 0">
            <view class="section-header">
              <text class="section-title">标签</text>
            </view>
            <view class="section-content">
              <view class="tags-container">
                <view class="tag-item" v-for="(tag, index) in taskTags" :key="index">
                  <text class="tag-text">{{ tag }}</text>
                </view>
              </view>
            </view>
          </view>
          
          <!-- 创建和更新时间 -->
          <view class="detail-section">
            <view class="section-header">
              <text class="section-title">时间信息</text>
            </view>
            <view class="section-content">
              <view class="time-info">
                <text class="time-label">创建时间：</text>
                <text class="time-value">{{ formatDateTime(taskCreateTime) }}</text>
              </view>
              <view class="time-info">
                <text class="time-label">最后更新：</text>
                <text class="time-value">{{ formatDateTime(taskUpdateTime) }}</text>
              </view>
            </view>
          </view>
        </view>
        
        <view class="task-footer">
          <view class="footer-buttons">
            <view class="action-button edit-button" @click="onEdit">
              <u-icon name="edit-pen" size="20" color="#fff"></u-icon>
              <text class="button-text">编辑</text>
            </view>
            <view class="action-button timer-button" @click="onTimer">
              <u-icon name="clock" size="20" color="#fff"></u-icon>
              <text class="button-text">计时</text>
            </view>
            <view class="action-button status-button" @click="onToggleStatus">
              <u-icon :name="taskStatus === 'done' ? 'reload' : 'checkbox-mark'" size="20" color="#fff"></u-icon>
              <text class="button-text">{{ taskStatus === 'done' ? '重新开始' : '完成' }}</text>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: 'TaskDetail',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    task: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    // 安全获取任务属性
    taskStatus() {
      return this.task && this.task.status ? this.task.status : 'todo';
    },
    
    taskTitle() {
      return this.task && this.task.title ? this.task.title : '未命名任务';
    },
    
    taskDescription() {
      return this.task && this.task.description ? this.task.description : '';
    },
    
    taskPriority() {
      return this.task && this.task.priority ? this.task.priority : 'none';
    },
    
    taskDeadline() {
      return this.task && this.task.deadline ? this.task.deadline : 0;
    },
    
    taskTags() {
      return this.task && this.task.tags ? this.task.tags : [];
    },
    
    taskCreateTime() {
      return this.task && this.task.createTime ? this.task.createTime : 0;
    },
    
    taskUpdateTime() {
      return this.task && this.task.updateTime ? this.task.updateTime : 0;
    },
    
    // 状态样式类
    statusClass() {
      const map = {
        todo: 'status-todo',
        doing: 'status-doing',
        done: 'status-done'
      };
      return map[this.taskStatus] || 'status-todo';
    },
    
    // 状态文本
    statusText() {
      const map = {
        todo: '待办',
        doing: '进行中',
        done: '已完成'
      };
      return map[this.taskStatus] || '待办';
    },
    
    // 优先级样式类
    priorityClass() {
      const map = {
        high: 'priority-high',
        medium: 'priority-medium',
        low: 'priority-low',
        none: 'priority-none'
      };
      return map[this.taskPriority] || 'priority-none';
    },
    
    // 优先级文本
    priorityText() {
      const map = {
        high: '高',
        medium: '中',
        low: '低',
        none: '无'
      };
      return map[this.taskPriority] || '无';
    },
    
    // 截止日期状态样式类
    deadlineStatusClass() {
      if (!this.taskDeadline) return '';
      
      const now = Date.now();
      const deadline = this.taskDeadline;
      
      if (deadline < now) {
        return 'deadline-overdue';
      } else if (deadline - now < 86400000) { // 24小时内
        return 'deadline-soon';
      } else {
        return 'deadline-normal';
      }
    },
    
    // 截止日期状态文本
    deadlineStatusText() {
      if (!this.taskDeadline) return '';
      
      const now = Date.now();
      const deadline = this.taskDeadline;
      
      if (deadline < now) {
        return '已逾期';
      } else if (deadline - now < 86400000) { // 24小时内
        return '即将到期';
      } else {
        return '正常';
      }
    }
  },
  methods: {
    // 关闭详情
    onClose() {
      this.$emit('close');
    },
    
    // 编辑任务
    onEdit() {
      this.$emit('edit', this.task);
      this.onClose();
    },
    
    // 切换任务状态
    onToggleStatus() {
      if (this.task && this.task.id) {
        this.$emit('toggle-status', this.task.id);
      }
      this.onClose();
    },
    
    // 开始计时
    onTimer() {
      if (this.task && this.task.id) {
        this.$emit('timer', this.task.id);
      }
      this.onClose();
    },
    
    // 格式化日期
    formatDate(timestamp) {
      if (!timestamp) return '';
      
      try {
        const date = new Date(timestamp);
        return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
      } catch (error) {
        console.error('格式化日期失败:', error);
        return '';
      }
    },
    
    // 格式化日期时间
    formatDateTime(timestamp) {
      if (!timestamp) return '';
      
      try {
        const date = new Date(timestamp);
        return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:${date.getMinutes()}`;
      } catch (error) {
        console.error('格式化日期时间失败:', error);
        return '';
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.task-detail-wrapper {
  position: relative;
}

.task-detail-container {
  background-color: var(--background-color);
  border-radius: 10px;
  overflow: hidden;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.task-header {
  padding: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.task-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 12px;
  
  &.status-todo {
    background-color: #faad14;
  }
  
  &.status-doing {
    background-color: #1890ff;
  }
  
  &.status-done {
    background-color: #52c41a;
  }
}

.status-text {
  font-size: 13px;
  color: #fff;
  margin-left: 6px;
}

.task-title-wrapper {
  margin-top: 8px;
}

.task-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-color);
  line-height: 1.4;
  word-break: break-word;
}

.task-content {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.detail-section {
  margin-bottom: 24px;
}

.section-header {
  margin-bottom: 12px;
}

.section-title {
  font-size: 15px;
  color: #999;
  font-weight: 500;
}

.section-content {
  padding: 6px 0;
}

.task-description {
  font-size: 15px;
  color: var(--text-color);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.deadline-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.deadline-text {
  font-size: 15px;
  color: var(--text-color);
  margin-left: 10px;
}

.deadline-status {
  margin-left: 12px;
  padding: 3px 8px;
  border-radius: 10px;
  
  &.deadline-overdue {
    background-color: #ff4d4f;
  }
  
  &.deadline-soon {
    background-color: #faad14;
  }
  
  &.deadline-normal {
    background-color: #52c41a;
  }
}

.deadline-status-text {
  font-size: 12px;
  color: #fff;
}

.priority-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 4px;
  
  &.priority-high {
    background-color: #ff4d4f;
  }
  
  &.priority-medium {
    background-color: #faad14;
  }
  
  &.priority-low {
    background-color: #52c41a;
  }
  
  &.priority-none {
    background-color: #d9d9d9;
  }
}

.priority-text {
  font-size: 14px;
  color: #fff;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
}

.tag-item {
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
  border-radius: 4px;
  padding: 5px 12px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.tag-text {
  font-size: 13px;
  color: #333;
}

.time-info {
  display: flex;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.time-label {
  font-size: 14px;
  color: #999;
  width: 90px;
}

.time-value {
  font-size: 14px;
  color: var(--text-color);
  flex: 1;
  word-break: break-word;
}

.task-footer {
  padding: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.footer-buttons {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.detail-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.action-button {
  flex: 1;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin: 0 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  
  &:first-child {
    margin-left: 0;
  }
  
  &:last-child {
    margin-right: 0;
  }
  
  &.edit-button {
    background-color: #2979ff;
  }
  
  &.timer-button {
    background-color: #faad14;
  }
  
  &.status-button {
    background-color: #42b983;
  }
}

.button-text {
  font-size: 15px;
  color: #fff;
  margin-left: 8px;
  font-weight: 500;
}
</style> 